<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>Sign in to your MeteoCal account</title>
    </h:head>
    <h:body style="color: #3366ff; font-family: sans-serif">
        <!-- username min 4chars max 15 -->
        <!-- pass min 8chars max 255 -->
        <div align="center" >


            <h1>
                MeteoCal
                <h:outputLabel value="beta" style="font-size: small"/>
            </h1>
            <h:panelGrid columns="2" style="text-align: right">
                <img src="/meteocal/files/logo.png" border="16" style="border-color:transparent"/>
                <h:form id="loginform" >

                    <h:panelGrid columns="1" style="text-align: right">
                        <p:inputText id="username" value="#{homeBean.userName}" required="true" requiredMessage="User name is required"/>
                        <p:watermark for="username" value="user name" id="watermarkun"/>
                        <p:password id="pass" value="#{homeBean.password}" required="true" requiredMessage="Password is required"/>
                        <p:watermark for="pass" value="password" id="watermarkp" />
                        <p:commandButton id="submit" action="#{homeBean.submitLogIn()}" value="Login" ajax="true" update="@all"/>
                    </h:panelGrid>

                    <h:messages  style="color: red"/>
                </h:form>
                <br/>
                <p:link outcome="registration" value="Don't have an account?"/>
                <br/>
                <p:link outcome="problems" value="Can't access your account?"/>
            </h:panelGrid>

        </div>
    </h:body>

</html>

